<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
let store = useStore();
let finished = ref(true);
let loading = ref(false);
let list = [
  {
    id: 0,
    name: "张三",
    headPortrait: "",
  },
  {
    id: 0,
    name: "李四",
    headPortrait: "",
  },
  {
    id: 0,
    name: "王五",
    headPortrait: "",
  },
];
import ids from "virtual:svg-icons-names";

// console.log(socket);

function onLoad() {}
</script> 

<template>
  <div class="container">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        icon="manager"
        size="large"
        v-for="item in list"
        :key="item.id"
        :title="item.name"
      />
    </van-list>
    <div class="icons">
      <SvgIcon
        :name="item"
        class="icon-item"
        v-for="(item, index) in ids"
        :key="index"
      ></SvgIcon>
    </div>
  </div>
</template>

<style scoped>
.icons {
  display: flex;
  flex-wrap: wrap;
  width: 310px;
  background-color: #666;
  padding-top: 10px;
}
.icon-item {
  flex-basis: 25%;
  font-size: 58px;
  margin-bottom: 10px;
}
.container {
  font-size: 48px;
  /* width: 100%; */
  /* word-wrap: break-word; */
}
</style>